<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DEMO</title>
    <!--视口 不缩放 -->
    <meta name="viewport" content="user-scalable=no,width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0">
    <meta name="flexible" content="initial-dpr=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 网页作者 -->
    <meta name="author" content="hg" />
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="msapplication-TileColor" content="#000" />
    <!--<link href="logo.ico" rel="shortcut icon" type="image/x-icon">-->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="favicon.ico">

    <link href="css/login.css" rel="stylesheet">
</head>

<body>

    <div class="login">
        <i class="bg1"></i>
        <i class="bg2"></i>
        <section class="login-content">
            <form method="post" action="##" autocomplete="off" >
                <a href="index.html"><img class="login-logo" src="image/logo.png"></a>
                <h1><a href="index.html">共建共享教学资源库平台</a></h1>
                <p>用　户　登　录</p>
                <div class="user">
                    <input type="text" placeholder="帐　号" autocomplete="off" >
                </div>
                <div class="pw">
                    <input type="password" placeholder="密　码" autocomplete="off" >
                </div>
                <div class="yz">
                    <input type="text" placeholder="验　证　码" autocomplete="off" >
                    <span>
                        <img src="" />
                    </span>
                </div>
                <div class="memory">
                    <span class="warning"></span>
                    <a>忘记密码</a>
                </div>
                <div class="submit">
                    <button type="submit">确　认</button>
                </div>
                <div class="xy">
                    <input type="checkbox" checked> 同意遵循本平台用户协议
                </div>
            </form>
        </section>
    </div>
    <script>
        (function () {
            function rem() {
                var docEl = document.documentElement;
                var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
                function recalc() {
                    var w = docEl.clientWidth;
                    if (w > 640) w = 640;
                    docEl.style.fontSize = 100 * (w / 640) + 'px';
                }
                //绑定浏览器旋转与加载 时
                window.addEventListener(resizeEvt, recalc, false);
                document.addEventListener('DOMContentLoaded', recalc, false);
            }
            rem();

            document.querySelector(".memory a").addEventListener("click",function(){
                text_color("请联系学校平台负责人")
            })

            function text_color(txt){
                console.log(txt)
                var obj = document.querySelector(".warning");
                obj.innerHTML = txt;
                obj.classList.add("in");
                setTimeout(function(){
                    obj.classList.remove("in");                    
                },2250)
            }
        })()
    </script>
</body>

</html>
